<script setup>
import { Delete } from "@element-plus/icons-vue";
import useWebsite from "./List/useWebsite";
import useIndex from "./List/useIndex";
const { website, del, find } = useWebsite();
const { currentIndex, handleItemClick } = useIndex();
const handleDel = (url) => {
  currentIndex.value = -1;
  del(url);
};
</script>

<template>
  <p v-if="!website.length">暂无数据</p>
  <div
    class="list"
    v-else>
    <div
      class="item"
      :class="{ current: currentIndex === i }"
      v-for="(item, i) in find"
      :key="item.url"
      @click="handleItemClick(i, item.url)">
      <img :src="item.img" />
      <h2>{{ item.title }}</h2>
      <el-button
        type="danger"
        :icon="Delete"
        @click.stop="handleDel(item.url)"
        circle />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list {
  .item {
    padding: 10px;
    border-left: 5px solid #efefef;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #eee;
    > img {
      height: 100px;
      vertical-align: bottom;
      margin-right: 50px;
    }
    > .el-button {
      position: absolute;
      right: 10px;
      display: none;
    }
    &:hover {
      background-color: #eee;
      > .el-button {
        display: block;
      }
    }
    &.current {
      border-left-color: #409eff;
    }
  }
}
</style>
